<template>
  <view class="container">
    <uni-nav-bar
      left-icon="left"
      title="学生注册"
      @clickLeft="D.back()"
      background-color="#007AFF"
      dark
    ></uni-nav-bar>
    <uni-forms
      :rules="D.rules"
      :model="D.currentModel"
      class="vcbox"
      ref="formRef"
    >
      <uni-forms-item label="学校" name="schoolId" required>
        <uni-data-select
          v-model="D.currentModel.schoolId"
          :localdata="D.schools.value"
          @change="D.onSchoolChange"
          placeholder="请选择学校"
        ></uni-data-select>
      </uni-forms-item>

      <uni-forms-item label="学院" name="collegeId" required>
        <uni-data-select
          v-model="D.currentModel.collegeId"
          :localdata="filteredColleges"
          @change="D.onCollegeChange"
          placeholder="请选择学院"
          :disabled="D.schools.value.length > 0 && !D.currentModel.schoolId"
        ></uni-data-select>
      </uni-forms-item>

      <uni-forms-item label="系" name="deptId" required>
        <uni-data-select
          v-model="D.currentModel.deptId"
          :localdata="filteredDepts"
          @change="D.onDeptChange"
          placeholder="请选择系"
          :disabled="!D.currentModel.collegeId"
        ></uni-data-select>
      </uni-forms-item>

      <uni-forms-item label="专业" name="majorId" required>
        <uni-data-select
          v-model="D.currentModel.majorId"
          :localdata="filteredMajors"
          placeholder="请选择专业"
          :disabled="!D.currentModel.deptId"
        ></uni-data-select>
      </uni-forms-item>

      <uni-forms-item label="用户名" name="username" required>
        <uni-easyinput
          v-model="D.currentModel.username"
          placeholder="请输入用户名"
        ></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item label="姓名" name="realname" required>
        <uni-easyinput
          v-model="D.currentModel.realname"
          placeholder="请输入真实姓名"
        ></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item label="密码" name="password" required>
        <uni-easyinput
          v-model="D.currentModel.password"
          placeholder="请输入密码"
          type="password"
        ></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item
        label="确认
      密码"
        name="confirmword"
        required
      >
        <uni-easyinput
          v-model="D.currentModel.confirmword"
          placeholder="请再次输入密码"
          type="password"
        ></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item label="学号" name="num" required>
        <uni-easyinput
          v-model="D.currentModel.num"
          placeholder="请输入学号"
        ></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item label="邮箱" name="email" required>
        <uni-easyinput
          v-model="D.currentModel.email"
          placeholder="请输入邮箱"
        ></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item label="电话" name="phone" required>
        <uni-easyinput
          v-model="D.currentModel.phone"
          placeholder="请输入电话"
        ></uni-easyinput>
      </uni-forms-item>
    </uni-forms>
    <button type="primary" @click="doSubmit">注册</button>
  </view>
</template>

<script setup>
import { ref, computed } from "vue";
import D from "@/js/user/student-register.js";

const formRef = ref(null);

// 根据学校ID过滤学院数据
const filteredColleges = computed(() => {
  if (!D.currentModel.schoolId) {
    return [];
  }
  return D.colleges.value.filter(
    (college) => college.schoolId == D.currentModel.schoolId
  );
});

// 根据学院ID过滤系数据
const filteredDepts = computed(() => {
  if (!D.currentModel.collegeId) {
    return [];
  }
  return D.depts.value.filter(
    (dept) => dept.collegeId == D.currentModel.collegeId
  );
});

// 根据系ID过滤专业数据
const filteredMajors = computed(() => {
  if (!D.currentModel.deptId) {
    return [];
  }
  return D.majors.value.filter(
    (major) => major.deptId == D.currentModel.deptId
  );
});

const doSubmit = () => {
  // 将表单引用传递给handleSubmit方法
  D.handleSubmit(formRef.value);
};
</script>

<style type="text/css">
.container {
  display: flex !important;
  flex-direction: column;
}
.content {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.title {
  font-size: 36rpx;
  color: #8f8f94;
}
.vcbox {
  display: flex !important;
  flex-direction: column;
  margin: 15px;
  padding-left: 10px;
  padding-right: 10px;
}
</style>
